<template>
  <div class="card">
    <Title-header title="我的明细"></Title-header>
    <van-tabs
      v-model:active="currentTab"
      class="details-tabs"
      @click-tab="onClickTab"
    >
      <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
        <div class="details_box">
          <div v-if="accountRecordList.length > 0">
            <my-list
              container-height="405px"
              :loading="loading"
              :finished="finished"
              @load="loadMore"
            >
              <div
                v-for="item in accountRecordList"
                :key="item.id"
                class="detail-item bg-input"
              >
                <div class="detail-item__header">
                  <span class="text--light">{{
                    item.description || "类型"
                  }}</span>
                  <span class="text--primary">{{ item.amount }}</span>
                </div>
                <!-- <div class="detail-item__footer">
                  <span class="text--sm text--light">订单状态</span>
                  <span class="text--sm text--light">{{
                    item.description
                  }}</span>
                </div> -->
                <div class="detail-item__footer">
                  <span class="text--sm text--light">创建时间</span>
                  <span class="text--sm text--light">{{ item.add_time }}</span>
                </div>
              </div>
            </my-list>
          </div>
          <div v-else style="height: 405px">
            <van-empty description="暂无数据" />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useInfoStore } from "@/store/infoman";
import type { TransactionRecord } from "@/types";
import debounce from "@/utils/debounce";
import { AccountRecord } from "@/api/modules/UserInfo";

const infoStore = useInfoStore();

// tabs数据
const tabList = ref([
  { id: "1", name: "USDT" },
  { id: "2", name: "算力" },
  { id: "3", name: "DaYou" },
]);

// 当前选中的tab索引
const currentTab = ref(0);
const count = ref(0);
// 明细数据
const accountRecordList = ref<TransactionRecord[]>([]);
// 分页相关
const page = ref(1);
const totalPages = ref(0);
const loading = ref(false);
const finished = ref(false);

// 获取账户流水
const getAccountRecord = async (pageNum: number, type: number) => {
  try {
    const res = await AccountRecord({
      page: pageNum,
      type: type,
    });

    if (res.code === 0) {
      totalPages.value = res.data.total_page;
      return res.data.list_data || [];
    }
    return [];
  } catch (error) {
    console.error("获取账户流水失败:", error);
    return [];
  }
};

// 重置加载状态和数据
const resetLoadState = () => {
  page.value = 1;
  accountRecordList.value = [];
  finished.value = false;
};

// 加载数据
const loadData = async () => {
  if (loading.value || finished.value) return;

  loading.value = true;
  try {
    const type = count.value; // 根据tab索引计算类型
    const newItems = await getAccountRecord(page.value, type);

    if (newItems.length) {
      accountRecordList.value = [...accountRecordList.value, ...newItems];
      page.value++;
    }

    // 判断是否已加载完所有数据
    if (page.value > totalPages.value) {
      finished.value = true;
    }
  } finally {
    loading.value = false;
  }
};

// 上拉加载更多
const loadMore = debounce(loadData, 1000);

// 切换tab时重新加载数据
const onClickTab = (tab: any) => {
  count.value = tab.name + 1;
  resetLoadState();
  loadData();
};

// 监听currentTab变化
watch(currentTab, () => {
  resetLoadState();
  loadData();
});
// 监听购买算力了过后进行刷新
watch(
  () => infoStore.refreshDetails,
  (newVal, oldVal) => {
    if (newVal && !oldVal) {
      console.log("====================================");
      console.log("执行明细");
      console.log("====================================");
      resetLoadState();
      loadData();
    }
  }
);
watch(
  () => infoStore.stateLogin,
  (newVal, oldVal) => {
    if (newVal && !oldVal) {
      resetLoadState();
      loadData();
    }
  }
);
</script>

<style scoped lang="less">
@import "../styles/common.less";
.details-tabs {
  padding: 26px 22px;
  background: linear-gradient(91deg, #f1fef7 0%, #f9f5e6 100%);
  border-radius: 10px;

  :deep(.van-tabs__wrap) {
    height: 35px;
    background-color: transparent;
    padding: 4px;

    .van-tabs__line {
      background-color: transparent;
    }
  }

  :deep(.van-tab) {
    border-radius: @border-radius-base;

    &--active {
      background: linear-gradient(90deg, #d1eeb1 0%, #4ee8b4 100%);
      border-radius: 5px;
    }
  }
}
.details_box {
  .detail-item {
    padding: 18px 14px;
    margin-top: 16px;
    background: #e8f7ed;
    box-shadow: 0px 5px 5px 1px rgba(93, 157, 135, 0.06);

    &__header,
    &__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text--light,
      .text--primary {
        font-size: 16px;
        color: #1b4c37;
      }
    }

    &__footer {
      margin-top: 8px;

      .text--light,
      .text--primary {
        font-size: 16px;
        color: rgba(27, 76, 55, 0.5);
      }
    }
  }
}
.details_box::-webkit-scrollbar {
  display: none;
}
</style>
